<template>
    <div class="selectStore">
        <el-dialog title="选择门店" :visible.sync="showSelectStoreCon" :before-close="handelClose" @open="handelOpen">
            <div class="dialog-search-con">
                <div class="dialog-search-item">
                    <div class="dialog-search-item-title">门店编号</div>
                    <div class="dialog-search-item-input">
                        <el-input size="mini" v-model="storeFormData.storeNo" placeholder="请输入门店编号"></el-input>
                    </div>
                </div>
                <div class="dialog-search-item">
                    <div class="dialog-search-item-title">门店名称</div>
                    <div class="dialog-search-item-input">
                        <el-input size="mini" v-model="storeFormData.storeName" placeholder="请输入门店名称"></el-input>
                    </div>
                </div>
                <div class="dialog-search-item">
                    <el-button size="mini" type="primary" @click="storeHandleSearch">查询</el-button>
                    <el-button size="mini" type="primary" @click="storeHandleClear">清空</el-button>
                </div>
            </div>
            <div>
                <el-table :data="storeData" border size="mini" @selection-change="handleSelectionChange"
                    :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column property="storeNo" label="门店编号" width="" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column property="storeName" label="门店名称" width="" align="center" :show-overflow-tooltip="true"></el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination @current-change="storeHandleCurrentChange" :current-page.sync="storeFormData.pageNum"
                    :page-size="storeFormData.pageSize" layout="total, prev, pager, next" :total="storeTotal"></el-pagination>
            </div>
            <div class="dialog-btn-con">
                <el-button size="small" type="primary" @click="handelSure">确定</el-button>
                <el-button size="small" @click="handelClose">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryStoreInfo } from "@/common/service/storeManagement/storeInfo.js";
export default {
    name: "selectStore",
    data() {
        return {
            /*搜索条件*/
            storeFormData: {
                storeNo: "", //门店编号
                storeName: "", //门店名称
                pageNum: 1,
                pageSize: 10
            },
            selectionData: [], //勾选框勾选的数据
            storeData: [], //门店信息表格数据
            storeTotal: null //门店信息表格数据总条数
        };
    },
    created() {},
    methods: {
        /*-----------------------------门店查询操作-----------------------------*/
        //查询所有门店表格数据
        _queryStoreInfo() {
            queryStoreInfo(this.storeFormData)
                .then(res => {
                    this.storeData = res.list;
                    this.storeTotal = res.totalCount;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        //页码切换
        storeHandleCurrentChange(val) {
            this.storeFormData.pageNum = val;
            this._queryStoreInfo();
        },
        //点击查询
        storeHandleSearch() {
            this.storeFormData.pageNum = 1;
            this.storeFormData.pageSize = 10;
            this._queryStoreInfo();
        },
        //点击清空
        storeHandleClear() {
            this.storeFormData = {
                storeNo: "",
                storeName: "",
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryStoreInfo();
        },

        /*-----------------------------多门店保存选择门店操作-----------------------------*/
        handelSure() {
            if (this.selectionData.length) {
                this.$emit("sure", JSON.stringify(this.selectionData));
            } else {
                this.$message.error("门店不能为空，请选择门店");
            }
        },

        /*-----------------------------监测勾选框操作-----------------------------*/
        handleSelectionChange(val) {
            this.selectionData = val;
        },

        /*-----------------------------关闭弹窗-----------------------------*/
        handelClose() {
            this.$emit("close", false);
        },

        /*-----------------------------打开弹窗-----------------------------*/
        handelOpen() {
            this.storeFormData = {
                storeNo: "",
                storeName: "",
                pageNum: 1,
                pageSize: 10
            };
            // 初始化多门店列表数据
            this._queryStoreInfo();
        }
    },
    props: {
        showSelectStoreCon: {
            type: Boolean,
            default: false
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>